<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <div>
        <el-button style="margin-bottom: 20px;"
                   v-if="$hasPermission('tb:area:insertArea')"
                   @click="openWin('add')">添加区域</el-button>
      </div>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                row-key="id"
                border
                :tree-props="{ children: 'children' }"
                style="width: 100%;">
        <el-table-column prop="name"
                         label="区域名称"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="sort"
                         label="排序"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="fatherName"
                         label="上级区域"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="marks"
                         label="备注"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         min-width="80">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('tb:area:insertArea')"
                       @click="openWin('addsub', scope.row)">{{ $t('add') }}</el-button>
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('tb:area:updateArea')"
                       @click="openWin('edit', scope.row)">{{ $t('update') }}</el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       v-if="$hasPermission('tb:area:deleteArea')"
                       @click="deleteHandle({ id: scope.row.id })">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync='areaParkAddDialog'
                 width="30%"
                 :title="detname"
                 class="user-dialog add-or-updata"
                 :append-to-body="true"
                 :before-close="handleClose"
                 :close-on-press-escape="false"
                 :close-on-click-modal="false">
        <template>
          <el-form :model="detDetaForm"
                   ref="detDetaForm1"
                   :rules="rules"
                   label-position="left"
                   @keyup.enter.native="dataFormSubmitHandle()"
                   label-width="80px">
            <el-form-item prop="name"
                          label="区域名称">
              <el-input v-model="detDetaForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="fatherName"
                          label="上级区域">
              <el-input v-model="detDetaForm.fatherName"
                        disabled></el-input>
            </el-form-item>
            <el-form-item label="排序"
                          prop="sort">
              <el-input-number v-model.trim="detDetaForm.sort"
                               controls-position="right"
                               :max="255"
                               :min="0"
                               class="width-100"
                               :label="$t('menu.sort')"></el-input-number>
            </el-form-item>
            <el-form-item prop="marks"
                          label="备注">
              <el-input v-model="detDetaForm.marks"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template slot="footer">
          <el-button @click="handleClose()">{{ $t('cancel') }}</el-button>
          <el-button type="primary"
                     @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '/tb/area/deleteArea', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '', // 导出接口，API地址
        getDataListURL: '/tb/area/getAreaList',
        getDataListIsPage: false // 数据列表接口，是否需要分页？
      },
      dataForm: {},
      dataList: [],
      comData: [],
      areaParkAddDialog: false,
      detDetaForm: { name: '', marks: '', fatherName: '', pid: '', sort: 0 },
      detname: '',
      detDeta: {},
      rules: {
        name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }]
      }

    }
  },
  components: { tableTemplate },
  mounted () {
  },
  methods: {
    sumbit () { },
    readNodes (data, arr = []) {
      for (let item of data) {
        arr.push(item.id)
        if (item.children.length !== 0) {
          console.log(item.children)
          this.readNodes(item.children, arr)
        }
      }
      return arr
    },
    openWin (_title, _row) {
      if (_title === 'add') {
        this.detDetaForm = {}
        this.detDetaForm.roleName = ''
        this.detname = '新增区域'
      } else if (_title === 'addsub') {
        this.detDetaForm = {}
        this.detDetaForm.fatherName = _row.name
        this.detDetaForm.pid = _row.id
        this.detname = '新增下级区域'
        this.comData = _row.children
        console.log(this.comData)
      } else {
        this.detname = '编辑区域'
        this.detDetaForm = _row
      }
      this.areaParkAddDialog = true
    },
    handleClose () {
      this.$refs.detDetaForm1.resetFields()
      this.comData = []
      this.getdata()
      this.areaParkAddDialog = false
    },
    dataFormSubmitHandle () {
      if (this.detname === '编辑区域') {
        this.updata()
      } else {
        if (this.detname === '新增区域') {
          for (let i = 0; i < this.dataList.length; i++) {
            if (this.dataList[i].name === this.detDetaForm.name) {
              return this.$message.warning('区域名已存在')
            }
          }
          this.detDetaForm.pid = 0
        } else {
          for (let i = 0; i < this.comData.length; i++) {
            if (this.comData[i].name === this.detDetaForm.name) {
              return this.$message.warning('区域名已存在')
            }
          }
        }
        this.$refs.detDetaForm1.validate((valid) => {
          if (valid) {
            this.$http.post('/tb/area/insertArea', this.detDetaForm).then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.areaParkAddDialog = false
              this.getdata()
            })
          } else {
            return false
          }
        })
      }
    },
    getdata () {
      this.$http.get('/tb/area/getAreaList').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList = res.data
        console.log(this.dataList)
      })
    },
    updata () {
      this.$http.put('/tb/area/updateArea', this.detDetaForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success('更新成功')
        this.areaParkAddDialog = false
        this.getdata()
      })
    }
  },
  // created  () {
  //   this.getdata()
  // },
  onShow () {

  }
}
</script>
<style lang="scss" scoped></style>
